<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>测试媒体文件访问</title>
    <meta charset="UTF-8">
    <base href="<%=request.getContextPath()%>/">
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
        }
        .info-box {
            background-color: #f5f5f5;
            border: 1px solid #ddd;
            padding: 15px;
            margin-bottom: 20px;
            border-radius: 5px;
        }
        .file-list {
            list-style: none;
            padding: 0;
        }
        .file-list li {
            margin-bottom: 10px;
            padding: 10px;
            background-color: #fff;
            border: 1px solid #eee;
            border-radius: 3px;
        }
        .test-form {
            margin-top: 20px;
            padding: 15px;
            background-color: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .btn {
            padding: 8px 15px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        .btn:hover {
            background-color: #45a049;
        }
    </style>
</head>
<body>
<div class="container">
    <h1>测试媒体文件访问</h1>
    
    <div class="info-box">
        <h2>服务器信息</h2>
        <p><strong>应用上下文路径:</strong> <%=request.getContextPath()%></p>
        <p><strong>服务器真实路径:</strong> <%=request.getServletContext().getRealPath("/")%></p>
    </div>
    
    <div class="test-form">
        <h2>测试访问API</h2>
        <button class="btn" onclick="testAccess()">测试媒体目录访问</button>
        <div id="result" style="margin-top: 15px;"></div>
    </div>
    
    <div class="test-form">
        <h2>测试直接访问文件</h2>
        <p>输入文件路径（相对于上下文路径）:</p>
        <input type="text" id="filePath" style="width: 80%; padding: 8px;" placeholder="例如: upload/media/2023/03/07/filename.png">
        <button class="btn" onclick="accessFile()">访问文件</button>
        <div id="fileResult" style="margin-top: 15px;"></div>
    </div>
</div>

<script>
    function testAccess() {
        fetch('ai/test-media-access')
            .then(response => response.json())
            .then(data => {
                let html = '<h3>测试结果:</h3>';
                if (data.code === 200) {
                    html += '<p><strong>真实路径:</strong> ' + data.extend.realPath + '</p>';
                    html += '<p><strong>上传目录:</strong> ' + data.extend.uploadDir + '</p>';
                    html += '<p><strong>目录是否存在:</strong> ' + data.extend.dirExists + '</p>';
                    html += '<p><strong>媒体上传路径配置:</strong> ' + data.extend.mediaUploadPath + '</p>';
                    html += '<p><strong>媒体访问URL前缀配置:</strong> ' + data.extend.mediaAccessUrlPrefix + '</p>';
                    
                    if (data.extend.fileList && data.extend.fileList.length > 0) {
                        html += '<h3>目录中的文件:</h3>';
                        html += '<ul class="file-list">';
                        data.extend.fileList.forEach(file => {
                            html += '<li>' + file + '</li>';
                        });
                        html += '</ul>';
                    } else {
                        html += '<p>目录为空或不存在</p>';
                    }
                } else {
                    html += '<p>错误: ' + data.msg + '</p>';
                }
                document.getElementById('result').innerHTML = html;
            })
            .catch(error => {
                document.getElementById('result').innerHTML = '<p>请求失败: ' + error.message + '</p>';
            });
    }
    
    function accessFile() {
        const filePath = document.getElementById('filePath').value.trim();
        if (!filePath) {
            alert('请输入文件路径');
            return;
        }
        
        const fullPath = '<%=request.getContextPath()%>/' + filePath;
        const isImage = filePath.toLowerCase().endsWith('.png') || 
                        filePath.toLowerCase().endsWith('.jpg') || 
                        filePath.toLowerCase().endsWith('.jpeg') || 
                        filePath.toLowerCase().endsWith('.gif');
        const isVideo = filePath.toLowerCase().endsWith('.mp4') || 
                        filePath.toLowerCase().endsWith('.webm') || 
                        filePath.toLowerCase().endsWith('.ogg');
        
        let html = '<h3>访问结果:</h3>';
        html += '<p><strong>完整URL:</strong> <a href="' + fullPath + '" target="_blank">' + fullPath + '</a></p>';
        
        if (isImage) {
            html += '<p><strong>图片预览:</strong></p>';
            html += '<img src="' + fullPath + '" style="max-width: 100%; max-height: 300px;" onerror="this.onerror=null;this.src=\'\';this.alt=\'图片加载失败\';">';
        } else if (isVideo) {
            html += '<p><strong>视频预览:</strong></p>';
            html += '<video src="' + fullPath + '" controls style="max-width: 100%; max-height: 300px;" onerror="this.onerror=null;this.src=\'\';this.alt=\'视频加载失败\';"></video>';
        }
        
        document.getElementById('fileResult').innerHTML = html;
    }
</script>
</body>
</html> 